<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script type="text/javascript" src="../../js/class/jquery-3.3.1.min.js" charset="UTF-8"></script> -->
		<style type="text/css">
			.advImg {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.imgs-container {
				width: 1280px;
				height: 1024px;
				overflow: hidden;
				position: absolute;
			}
			.left-hidden {
				animation: left-hidden 2000ms;
				-moz-animation: left-hidden 2000ms;
				-webkit-animation: left-hidden 2000ms;
			}
			.right-hidden {
				animation: right-hidden 2000ms;
				-moz-animation: right-hidden 2000ms;
				-webkit-animation: right-hidden 2000ms;
			}
			.center-opacity {
				animation: center-opacity 2000ms;
				-moz-animation: center-opacity 2000ms;
				-webkit-animation: center-opacity 2000ms;
			}
			.top-opacity {
				animation: top-opacity 2000ms;
				-moz-animation: top-opacity 2000ms;
				-webkit-animation: top-opacity 2000ms;
			}
			.bottom-opacity {
				animation: bottom-opacity 2000ms;
				-moz-animation: bottom-opacity 2000ms;
				-webkit-animation: bottom-opacity 2000ms;
			}
			@keyframes left-hidden {
				from{left: -100%;}
				to{left: 0;}
			}
			@-webkit-keyframes left-hidden {
				from{left: -100%;}
				to{left: 0;}
			}
			@keyframes right-hidden {
			 	from{right: -100%;}
			 	to{right: 0;}
			}
			@-webkit-keyframes right-hidden {
			 	from{right: -100%;}
			 	to{right: 0;}
			}
			@keyframes center-opacity {
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@-webkit-keyframes center-opacity {
				from{opacity: 0;}
				to{opacity: 1;}
			}
			@keyframes top-opacity {
				from{opacity: 0;top: -100%;}
				to{opacity: 1;top: 0;}
			}
			@-webkit-keyframes top-opacity {
				from{opacity: 0;top: -100%;}
				to{opacity: 1;top: 0;}
			}
			@keyframes bottom-opacity {
				from{opacity: 0;bottom: -100%;}
				to{opacity: 1;bottom: 0;}
			}
			@-webkit-keyframes bottom-opacity {
				from{opacity: 0;bottom: -100%;}
				to{opacity: 1;bottom: 0;}
			}
		</style>
	</head>
	<body>
		<div id="imgsContainer" class="imgs-container"></div>
			
		
		<script type="text/javascript">
			//图片路径集合
			var ImgSrcArr = [
				"../../img/advertisement/advertise1.png",
				"../../img/advertisement/advertise2.png",
				"../../img/advertisement/advertise3.png"
			]
			//获取图片添加节点
			var imgsContainer = document.getElementById("imgsContainer");
			for(var i=0;i<ImgSrcArr.length;i++){
				var ImgObj = document.createElement("img");
				ImgObj.src = ImgSrcArr[i];
				ImgObj.classList.add("advImg");
				imgsContainer.appendChild(ImgObj);
			}
			var styleArr = ["left-hidden","top-opacity","center-opacity","right-hidden","bottom-opacity"];//样式汇总
			var carouselImg = setInterval(function(){
				var ImgObjs = document.getElementsByClassName("advImg");
				var firstImg = ImgObjs[0];
				var classIndex = parseInt((Math.random())*(styleArr.length));//随机的加入循环样式
				firstImg.classList.add(styleArr[classIndex]);
				imgsContainer.appendChild(firstImg);
				setTimeout(function(){
					firstImg.classList.remove(styleArr[classIndex]);
				},2000)//注:循环时间应大于定时触发时间eg:6000>2000
			},6000);
		/* imgsContainer.onclick = function(){//onclick事件方面在IE浏览器上会出现一些问题
			imgsContainer.style="display:none";
			setTimeout(function(){
				imgsContainer.style="display:block";
			},2000)
		} */
		</script>
	</body>
</html>